<template>
  <view class="matchCareerDevelopment">
    <view class="subscribeText">以下为选科组合对职业发展的匹配程度</view>
    <view class="radar-box" v-if="skillData.length">
      <Header title="职业技能" :legend="skillLegend"></Header>
      <RadarChart
        canvasId="skill"
        :chartData="skillData"
        :indicator="skillIndicator"
        :areaColor="['#6f46f8', '#38ca88', '#3698ff']"
      ></RadarChart>
      <view class="info-box">
        <text class="text">{{ currentSubjectLocal }}组合对技能匹配率</text>
        <text class="purple">{{ skillScore }}</text>
      </view>
      <view class="content-box">
        <view class="content" v-for="item in skillData" :key="item.name">
          <text :class="[isIOS ? 'span-ios' : 'span-android']"
            >{{ item.name }}：</text
          >
          <view
            :class="[item.show ? 'my-introduction' : 'my-introduction-hide']"
            @click="changeHeight(item)"
            >{{ item.comment }}</view
          >
          <view
            v-if="item.comment && item.comment != '暂无数据'"
            :class="[item.show ? 'avatar-rotate' : 'avatar']"
            @click="changeHeight(item)"
          >
          </view>
        </view>
      </view>
    </view>
    <view class="radar-box" v-if="knowledgeData.length">
      <Header title="职业知识" :legend="knowledgeLegend"></Header>
      <RadarChart
        canvasId="knowledge"
        :chartData="knowledgeData"
        :indicator="knowledgeIndicator"
        :areaColor="['#3698ff', '#6f46f8', '#38ca88']"
      ></RadarChart>
      <view class="info-box">
        <text class="text">{{ currentSubjectLocal }}组合对知识匹配率</text>
        <text class="green">{{ knowledgeScore }}</text>
      </view>
      <view class="content-box">
        <view class="content" v-for="item in knowledgeData" :key="item.name">
          <text :class="[isIOS ? 'span-ios' : 'span-android']"
            >{{ item.name }}：</text
          >
          <view
            :class="[item.show ? 'my-introduction' : 'my-introduction-hide']"
            @click="changeHeight(item)"
            >{{ item.comment }}</view
          >
          <view
            v-if="item.comment && item.comment != '暂无数据'"
            :class="[item.show ? 'avatar-rotate' : 'avatar']"
            @click="changeHeight(item)"
          >
          </view>
        </view>
      </view>
    </view>
    <view class="radar-box" v-if="qualityData.length">
      <Header title="职业素质" :legend="qualityLegend"></Header>
      <RadarChart
        canvasId="quality"
        :chartData="qualityData"
        :indicator="qualityIndicator"
        :areaColor="['#38ca88', '#3698ff', '#6f46f8']"
      ></RadarChart>
      <view class="info-box">
        <text class="text">{{ currentSubjectLocal }}组合对素质匹配率</text>
        <text class="blue">{{ qualityScore }}</text>
      </view>
      <view class="content-box">
        <view class="content" v-for="item in qualityData" :key="item.name">
          <text :class="[isIOS ? 'span-ios' : 'span-android']"
            >{{ item.name }}：</text
          >
          <view
            :class="[item.show ? 'my-introduction' : 'my-introduction-hide']"
            @click="changeHeight(item)"
            >{{ item.comment }}</view
          >
          <view
            v-if="item.comment && item.comment != '暂无数据'"
            :class="[item.show ? 'avatar-rotate' : 'avatar']"
            @click="changeHeight(item)"
          >
          </view>
        </view>
      </view>
    </view>
    <view
      class="main-content-empty"
      v-if="!skillData.length && !knowledgeData.length && !qualityData.length"
    >
      <Empty
        :baseImg="emptyImg"
        text="暂无数据"
        textColor="#888"
        :fontWeight="400"
      />
    </view>
  </view>
</template>

<script>
import Empty from '@/components/Empty.vue';
import RadarChart from '../components/RadarChart.vue';
import Header from '../components/Header.vue';
const classMap = new Map();
classMap.set('11', '物理');
classMap.set('12', '历史');
classMap.set('13', '生物');
classMap.set('14', '化学');
classMap.set('15', '政治');
classMap.set('16', '地理');
export default {
  components: {
    Empty,
    Header,
    RadarChart
  },
  props: {
    chartData: {
      type: Object,
      default: () => {}
    },
    selectedSubjectList: {
      type: Array,
      default: () => []
    },
    currentSubject: {
      type: String,
      default: ''
    }
  },
  watch: {
    selectedSubjectList: {
      handler(val) {
        if (val && val.length) {
          this.skillLegend = this.getLegend(val, [
            '#6f46f8',
            '#38CA88',
            '#3698FF'
          ]);
          this.knowledgeLegend = this.getLegend(val, [
            '#38CA88',
            '#3698FF',
            '#6f46f8'
          ]);
          this.qualityLegend = this.getLegend(val, [
            '#3698FF',
            '#6f46f8',
            '#38CA88'
          ]);
          this.formatData();
        }
      },
      deep: true
    },
    currentSubject: {
      handler(val) {
        this.currentSubjectLocal = val.replace(/\、/g, ' / ');
      },
      immediate: true
    }
  },
  data() {
    return {
      title: '',
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      isIOS: uni.getSystemInfoSync().platform == 'ios',
      skillLegend: [],
      knowledgeLegend: [],
      qualityLegend: [],
      skillScore: '-',
      knowledgeScore: '-',
      qualityScore: '-',
      currentSubjectLocal: '',
      selectedId: [],
      skillData: [],
      knowledgeData: [],
      qualityData: [],
      skillIndicator: [],
      knowledgeIndicator: [],
      qualityIndicator: []
    };
  },
  created() {},
  methods: {
    getLegend(val, colorList) {
      const legend = [];
      val.forEach((item, index) => {
        legend.push({
          color: colorList[index],
          name: item.name
        });
      });
      return legend;
    },
    formatObjToArr(obj) {
      const arr = [];
      Object.keys(obj).forEach((key) => {
        arr.push(obj[key]);
      });
      return arr;
    },
    getIndicator(str) {
      const temp = this.chartData[str] ? this.chartData[str] : {};
      const obj = temp[this.selectedId[0]].score;
      const arr = [];
      Object.keys(obj).forEach((key) => {
        arr.push({
          name: key,
          max: 5
        });
      });
      return arr;
    },
    formatData() {
      this.selectedId = this.selectedSubjectList.map((item) => item.id);
      let temp1 = [],
        temp2 = [],
        temp3 = [];
      for (let i = 0; i < this.selectedId.length; i++) {
        const id = this.selectedId[i];
        if (this.chartData['skill']) {
          const comment1 = this.chartData['skill'][id].comment;
          const avgScore1 = this.chartData['skill'][id].avgScore;
          const score1 = this.chartData['skill'][id].score;
          temp1.push({
            show: false,
            name: classMap.get(id),
            id: id,
            comment: comment1,
            avgScore: avgScore1,
            radarData: this.formatObjToArr(score1)
          });
        }
        if (this.chartData['knowledge']) {
          const comment2 = this.chartData['knowledge'][id].comment;
          const avgScore2 = this.chartData['knowledge'][id].avgScore;
          const score2 = this.chartData['knowledge'][id].score;
          temp2.push({
            show: false,
            name: classMap.get(id),
            id: id,
            comment: comment2,
            avgScore: avgScore2,
            radarData: this.formatObjToArr(score2)
          });
        }
        if (this.chartData['quality']) {
          const comment3 = this.chartData['quality'][id].comment;
          const avgScore3 = this.chartData['quality'][id].avgScore;
          const score3 = this.chartData['quality'][id].score;
          temp3.push({
            show: false,
            name: classMap.get(id),
            id: id,
            comment: comment3,
            comment: comment3.substring(0, 100),
            avgScore: avgScore3,
            radarData: this.formatObjToArr(score3)
          });
        }
      }
      this.skillIndicator = this.getIndicator('skill');
      this.knowledgeIndicator = this.getIndicator('knowledge');
      this.qualityIndicator = this.getIndicator('quality');
      this.skillData = temp1;
      this.knowledgeData = temp2;
      this.qualityData = temp3;
      this.skillScore = this.getAvgScore(temp1);
      this.knowledgeScore = this.getAvgScore(temp2);
      this.qualityScore = this.getAvgScore(temp3);
      console.log("------------雷达图数据格式-------------->",this.skillData,this.skillIndicator);
    },
    getAvgScore(arr) {
      let sum = 0;
      arr.forEach((item) => {
        sum += parseFloat(item.avgScore) / 5;
      });
      return ((sum / arr.length) * 100).toFixed(2) + '%';
    },
    changeHeight(item) {
      item.show = !item.show;
    }
  }
};
</script>
<style scoped lang="scss">
$img-base-person: $img-base + 'career/';
.matchCareerDevelopment {
  padding: 32rpx;
  border-radius: 24rpx;
  background-color: #fff;
  .subscribe-text {
    font-size: 28rpx;
    color: #000000;
  }
  .radar-box {
    width: calc(100vw - 128rpx);
    border-radius: 8rpx;
    padding: 60rpx 0;
    &:not(:last-child) {
      border-bottom: 2rpx solid #e5e5e5;
    }
    &:first-child {
      padding-top: 46rpx;
    }
    .info-box {
      margin-top: 36rpx;
      padding: 14rpx 0;
      text-align: center;
      background: #f6f5f8;
      border-radius: 8rpx;
      .text {
        font-size: 28rpx;
        color: #000000;
        margin-right: 10rpx;
        font-weight: bold;
      }
      .purple {
        font-weight: bold;
        color: #9727ff;
      }
      .green {
        font-weight: bold;
        color: #38ca88;
      }
      .blue {
        font-weight: bold;
        color: #3698ff;
      }
    }
    .content-box {
      margin-top: 56rpx;
      .content {
        font-family: D-DIN-PRO, D-DIN-PRO;
        font-weight: bold;
        font-size: 30rpx;
        color: #000000;
        margin-bottom: 36rpx;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        position: relative;

        .avatar,
        .avatar-rotate {
          position: absolute;
          top: 0;
          right: -22rpx;
          width: 32rpx;
          height: 100%;
          background-image: url($img-base-person + 'positionDictionary/downArrowInBasicInfo.png');
          background-size: 100% 32rpx;
          background-repeat: no-repeat;
        }
        .avatar {
          background-position: center center;
          &::before {
            // 一个透明的元素，用来部分遮盖文字
            content: '';
            position: absolute;
            top: 0;
            left: -52rpx;
            width: 52rpx;
            height: 100%;
            background: linear-gradient(
              180deg,
              rgba(255, 255, 255, 0.2) 0%,
              #ffffff 100%
            );
          }
        }
        .avatar-rotate {
          transform: rotate(180deg);
          background-position: center center;
        }

        span-ios {
          width: 150rpx;
          margin-top: 19rpx;
        }

        span-android {
          width: 150rpx;
          margin-top: 5rpx;
        }

        .introduction {
          width: 470rpx;
          overflow: hidden;
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          line-height: 40rpx;
          font-family: D-DIN-PRO, D-DIN-PRO;
          padding: 0;
        }

        .my-introduction,
        .my-introduction-hide {
          margin-left: 12rpx;
          width: 518rpx;
          white-space: pre-wrap;
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          line-height: 40rpx;
          font-family: D-DIN-PRO, D-DIN-PRO;
        }
        .my-introduction-hide {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; // 限制显示为两行
          overflow: hidden;
          position: relative;
        }

        .glass {
          width: 20rpx;
          height: 100%;
          position: absolute;
          right: 32rpx;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            #ffffff 100%
          );
        }

        .u-input__textarea {
          padding: 0 !important;
        }
      }
    }
  }
}
</style>
